$avatar-size: 100px;
$item-icon-size: 34px;

.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  height: 100%;

  &::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(90deg, $main-yellow 0%, $main-red 100%) top/100% 50% no-repeat;
  }
}

.accountInfoLayer {
  padding: 0.8 * $avatar-size 20px 20px;
  background: linear-gradient(transparent 0%, transparent 45%, #fff 45%, #fff 100%);
}

.layer {
  @extend %with-shadow;
  position: relative;
  padding: 0.5 * $avatar-size 20px 20px;
  border-radius: $box-radius;
  background-color: #fff;
}

.avatar {
  position: absolute;
  top: -0.5 * $avatar-size;
  left: 50%;
  display: block;
  width: $avatar-size;
  height: $avatar-size;
  border-radius: 50%;
  background-color: $main-gray;
  transform: translateX(-50%);
}

.nickName {
  line-height: 2;
  text-align: center;
}

.dataBar {
  display: flex;
}

.dataItem {
  display: flex;
  flex-direction: column;
  width: 33.33%;
  align-items: center;
}

.dataTitle {
  margin-top: 1em;
  font-size: 70%;
  color: $font-gray;
}

.dataValue {
  font-weight: bold;
  line-height: 2;
}

// 功能列表
.functionList {
  flex: 1;
  padding: $content-box-padding;
  box-sizing: border-box;
  overflow-y: scroll;
  background-color: #fff;
}

.listItem {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.4 * $item-icon-size 0;
  overflow: hidden;
}

.itemIco {
  width: $item-icon-size;
  height: $item-icon-size;
}

.itemName {
  flex: 1;
  margin: 0 0.75 * $content-box-padding;
  color: $article-color;
}

.itemArrow {
  width: 0.5 * $item-icon-size;
  height: 0.5 * $item-icon-size;
}

.listItem:not(:last-child)::after {
  position: absolute;
  left: $item-icon-size + 0.75 * $content-box-padding;
  bottom: 0;
  display: block;
  content: '';
  width: 100%;
  height: 1px;
  background-color: $main-gray;
}
